<template>
  <div class="">
    <div class="listBox_head">
      <el-button type="primary" @click="jumpAdd">添加新门店</el-button>
      <!-- <el-button type="primary" @click="jumpAddOld">添加新门店（老）</el-button> -->
    </div>
    <ex-table
      ref="table"
      :loading="loading"
      :table-column="tableColumn"
      :table-data="tableData"
      @pageSizeChange="handleSizeChange"
      @currentPageChange="handleCurrentChange"
    >
      <template v-slot:operate="{ scope }">
        <el-button v-if="scope.row.status == 3" @click="editDetail(scope.row.merchantId)" size="small"
          >编辑资料</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="lookMerchant(scope.row.merchantId)"
          v-if="scope.row.status != 3"
          >查看</el-button
        >
      </template>
    </ex-table>
    <addPersonnel 
      v-if="detailDialog"
      :visible.sync="detailDialog" 
      :id="id"
      @success="_handleSuccess">
    </addPersonnel>
  </div>
</template>
<script>
// components
import {
  chainApplyList,
  chainshopDetail,
  addShop,
  editMerchant,
  deleteMerchant,
} from "@/api/chainManagement";
import handlePageMixin from "@/mixins/handlePageMixin";
import addPersonnel from "./addPersonnel"
export default {
  //   name: "",
  components: {
    addPersonnel
  },
  mixins: [handlePageMixin],
  data() {
    return {
      loading: false,
      buttonLoading: false,
      formInline: {
        businessLicence: "", //营业执照
        chainType: "", //连锁类型 1 直营店 2加盟店
        proceedsType: "", //收款类型 1 总部收款 2门店收款
      },
      status: 1,
      storeId: "", //关联门店id
      show: false,
      chainId: "", //总店id
      detailDialog: false,
      id: '',
      tableData: [],
      tableColumn: [
        { prop: "merchantName", label: "商户账号名称" },
        { prop: "shopName", label: "店铺名称" },
        { prop: "businessLicenseNumber", label: "营业执照代码" },
        { prop: "applyTime", label: "申请时间" },
        { prop: "statusDict", label: "进件状态" },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "320",
          fixed: "right",
        },
      ],
     
    };
  },
  created() {
    this.chainId = this.$route.query.id;
    this.getList();
  },
  computed: {},
  methods: {
    
    addTo() {
      //现有门店
      this.status = 1;
      this.show = false;
      this.detailDialog = true;
      this.formInline = {
        businessLicence: "", //营业执照
        chainType: "", //连锁类型 1 直营店 2加盟店
        proceedsType: "", //收款类型 1 总部收款 2门店收款
      };
    },
    jumpAdd() {
      //新门店
      this.$router.push({
        path: "/merchants/store-add",
        query: { chainId: this.chainId,type: 'add'},
      });
    },
    //编辑门店
    editDetail(merchantId) {
      this.$router.push({
        path: "/merchants/store-add",
        query: { merchantId: merchantId,type: 'edit'},
      });
    },
    jumpAddOld() {
      //新门店
      this.$router.push({
        path: "/merchants/store-add-old",
        query: { chainId: this.chainId},
      });
    },
    sumit() {
      console.log(this.status);
      //确认
      if (this.status == 1) {
        this.addShop();
      } else {
        this.clickEdit();
      }
    },
    clickEdit() {
      //编辑editMerchant
      const params = {
        chainType: this.formInline.chainType,
        proceedsType: this.formInline.proceedsType,
        id: this.storeId,
      };
      this.buttonLoading = true;
      editMerchant(params)
        .then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
          this.detailDialog = false;
          this.buttomLoading = false;
          setTimeout(() => {
            this.getList();
          }, 800);
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    addShop() {
      //新增
      const params = {
        ...this.formInline,
        chainId: this.chainId,
      };
      this.buttonLoading = true;
      addShop(params)
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
          });
          this.buttomLoading = false;
          this.detailDialog = false;
          setTimeout(() => {
            this.getList();
          }, 800);
        })
        .finally(() => {
          this.buttonLoading = false;
        });
    },
    getList() {
      const params = {
        ...this.pageOptions,
        chainId: this.chainId,
      };
      this.loading = true;
      chainApplyList(params)
        .then((res) => {
          const { total, records } = res.result;
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    deleteMerchant(id) {
      //删除deleteMerchant
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteMerchant(id).then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
            });
            setTimeout(() => {
              this.getList();
            }, 800);
          });
        })
        .catch(() => {});
    },
    //查看
    lookMerchant(merchantId){
      this.$router.push({
        path: "/merchants/store-add",
        query: { merchantId: merchantId,type: 'look'},
      });
    },
    _handleSuccess() {
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}

</style>
